vlwkaos' digital garden

React Leaflet - 지도 이벤트 처리 방법

React Leaflet의 <Map> 컴포넌트 아래서만 useMapEvents훅을 사용 가능하므로, 컨트롤 전용 깡통 컴포넌트를 만들어준다.

export default function MapViewController(): ReactElement {
  const { setLatLng, setZoom } = mapHooks.useMapActions();

  const map = useMapEvents({
    dragend: () => {
      setLatLng(map.getCenter());
    },
    zoomend: () => {
      setZoom(map.getZoom());
    },
  });
  return <></>;
}

React Leaflet - 지도 이벤트 처리 방법